<template>
  <div class="options-tags forbid">
    <draggable v-model="items"  animation="500" chosenClass="active"  filter=".forbid1" :preventOnFilter="false" class="dragging" @change="change">
      <div class="options-tag" v-for="(value, indexs) in items" :key="indexs">
        <i class="jyfont  card-col-move"></i>
        <div class="options-tag-inp">
          <div class="one-line">{{value}}</div>
        </div>
        <i class="el-tag__close el-icon-close" @click="handleRemoveTag(index, indexs)"></i>
      </div>
      <el-input
          style="flex-grow: 1; width: 0.0961538%; max-width: 100%; min-width: 100px;"
          class="options-input forbid1"
          placeholder="输入属性值，多个属性enter输入"
          v-model="tagInputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
      >
      </el-input>
    </draggable>

  </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
    components: {draggable},
    props: {
        value: {
            type: Array,
            default: function () {
                return [];
            }
        }
    },
    data () {
        return {
            tagInputValue: '',
            items: this.value
        };
    },
    watch: {
        value: {
            handler: function (val) {
                this.items = val;
            },
            deep: true
        }
    },
    methods: {

        change () {
            this.$emit('input', this.items);
        },
        handleInputConfirm () {
            if (this.tagInputValue === '') {
                this.$message.error('请输入属性名称');
                return;
            }
            if (!/^[^,]*$/.test(this.tagInputValue)) {
                this.$message.error('名称不能带有,');
                return;
            }
            this.items.push(this.tagInputValue);
            this.tagInputValue = '';
            this.$emit('input', this.items);
        },
        handleRemoveTag (index, indexs) {
            this.items.splice(indexs, 1);
            this.$emit('input', this.items);
        }
    }
};
</script>

<style scoped lang="scss">
.options-tags{
  background: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .dragging{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 0 8px 8px;
    width: 100%;
  }
  .options-tag{
    cursor: pointer;
    height: 36px;
    color: #0560fd;
    padding: 10px 8px;
    background: #e6efff;
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    max-width: 96%;
    margin: 0 4px 4px 0;
    .options-tag-inp{
      width: 98%;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      margin: 0 8px;
      .one-line {
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        white-space: nowrap;
      }
    }
  }
  ::v-deep .el-input__inner {
    border: none;
    width: 100%;
  }
}
</style>
